//分页组件
import { Pagination } from 'antd'
import type { PaginationProps } from 'antd'
import { memo } from 'react'
import './index.less'
interface PaginationDataProps {
  total: number //总数
  pageNo: number //当前页面
  pageSize: number //页面数量
  onChange: (page: number, pageSize: number) => void //切换页面
  className?: string
  children?: React.ReactNode
  disabled?: boolean
}
const PaginationLayout = (props: PaginationDataProps) => {
  const {
    pageNo,
    pageSize,
    total,
    onChange,
    children,
    disabled = false
  } = props
  const showTotal: PaginationProps['showTotal'] = (total) =>
    `共 ${total} 条`
  return (
    <div
      className={[
        'common-fl  common-aic pagination',
        children ? 'common-jcsb' : 'common-flend'
      ].join(' ')}
    >
      {children}
      <Pagination
        showQuickJumper
        showSizeChanger
        defaultCurrent={1}
        pageSize={pageSize}
        current={pageNo}
        pageSizeOptions={['15', '30', '45']}
        total={total}
        showTotal={showTotal}
        onChange={onChange}
        className="common-fl common-flend"
        disabled={disabled}
      />
    </div>
  )
}

export default memo(PaginationLayout)
